<template>
  <div>
    <div class="clock">
      <canvas id="canid" class="canid"></canvas>
    </div>
    <div style="width:100%; height:55px;"></div>
    <div id="app">
      <p v-bind:class="{content:1,marginb:1}">
        <span v-bind:class="{grey:1}">你都已经</span>
        <span v-bind:class="{bigfont:1}">{{count}}</span>
        <span v-bind:class="{grey:1}">岁了！！</span>
      </p>
      <div style="width:100%; height:90px;">
        <p v-bind:class="{content:1,grey:1,marginz:1}">{{theyear}}年{{month}}月{{week}}周</p>
        <p v-bind:class="{content:1,grey:1,marginz:1}">{{day}}日{{hour}}时{{minute}}分</p>
      </div>

      <div style="width:100%; height:110px;"></div>
      <div style="text-align:center; width:100%; height:100px; margin-top:20px; margin-bottom:0px;">
        <button v-bind:class="{content:1,button:1}">
          <a v-bind:class="{content:1,url:1}" v-bind:href="die_url">剩下的日子</a>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ShowClock",
  data() {
    return {
      show_resetlink: false,
      longevity: 100,
      birthdate: new Date(1991, 8, 11, 13, 0, 0),
      count: 0,
      theyear: 0,
      month: 0,
      week: 0,
      day: 0,
      hour: 0,
      minute: 0,
      birthmonth:0,
      birthday:0,
      birthyear:0,
      show_resetlink:false,
      die_url: "http://ainotebook.51open.net/static/html/die.html",
      show_resetlink: false
    };
  },
  created(){
    this.birthyear = this.$route.query.year
    this.birthmonth = this.$route.query.month
    this.birthday = this.$route.query.day
    this.longevity = this.$route.query.longevity
    this.lifecount()
  },
  mounted() {
    var canid = document.getElementById("canid");
    var ct = canid.getContext("2d");
    canid.width = 660;
    canid.height = 660;
    // canid.style.border='1px solid #bbb';

    ct.beginPath();
    setInterval(function() {
      var r = 330;
      var r2 = 300;
      ct.clearRect(0, 0, canid.width, canid.height);
      ct.beginPath();
      ct.arc(r, r, r2, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
      // 只有弧度
      ct.strokeStyle = "#aaa";
      ct.stroke();

      // ct.fillText(json[0].title,0,0);
      ct.beginPath();
      var tangleR = 0;

      for (var i = 0; i < 360; i++) {
        var x;
        var y;
        ct.beginPath();
        ct.moveTo(r, r);
        x = r + Math.cos((tangleR * Math.PI) / 180) * r2;
        y = r + Math.sin((tangleR * Math.PI) / 180) * r2;
        tangleR++;
        ct.strokeStyle = "#ccc";

        // console.log(x,y);
        ct.lineTo(x, y);
        ct.stroke();
      }

      ct.beginPath();
      ct.arc(r, r, r2 - 10, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
      ct.fillStyle = "white";
      ct.fill();
      ct.beginPath();
      var tangle = 0;

      for (var i = 0; i < 60; i++) {
        var x;
        var y;
        ct.beginPath();
        ct.moveTo(r, r);
        x = r + Math.cos((tangle * Math.PI) / 180) * r2;
        y = r + Math.sin((tangle * Math.PI) / 180) * r2;
        /*弧度上的x,y坐标*/
        tangle += 6;
        ct.strokeStyle = "#aaa";
        // console.log(x,y);
        ct.lineTo(x, y);
        ct.stroke();
      }

      ct.beginPath();
      ct.arc(r, r, r2 - 20, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
      ct.fillStyle = "white";
      ct.fill();
      var tangleRR = -60;

      for (var i = 0; i < 12; i++) {
        ct.beginPath();
        var x;
        var y;
        // ct.moveTo(250,250);

        x = r + Math.cos((tangleRR * Math.PI) / 180) * (r2 - 50);
        y = r + Math.sin((tangleRR * Math.PI) / 180) * (r2 - 50);
        tangleRR += 30;
        console.log(x, y, "" + (i + 1));
        // ct.lineTo(x,y);
        // ct.stroke();
        ct.fillStyle = "#aaa";

        ct.fillText("" + (i + 1), x, y);
        ct.fill();
        ct.textAlign = "center";
      }

      ct.beginPath();
      ct.arc(r, r, 5, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
      ct.stroke();

      ct.fill();

      var time = new Date();
      var h = time.getHours();
      var m = time.getMinutes();
      var s = time.getSeconds();
      var mj = m * 6 + (s / 60) * 6 - 90;
      var sj = s * 6 - 90;
      var hj = h * 30 + (m / 60) * 30 + (s / 3600) * 30 - 90;
      x0 = r + Math.cos((hj * Math.PI) / 180) * (r2 - 120);
      x1 = r + Math.cos((mj * Math.PI) / 180) * (r2 - 100);
      x2 = r + Math.cos((sj * Math.PI) / 180) * (r2 - 60);
      y0 = r + Math.sin((hj * Math.PI) / 180) * (r2 - 120);
      y1 = r + Math.sin((mj * Math.PI) / 180) * (r2 - 100);
      y2 = r + Math.sin((sj * Math.PI) / 180) * (r2 - 60);

      ct.beginPath();
      ct.moveTo(r, r);
      ct.lineTo(x0, y0);
      ct.stroke();
      ct.beginPath();
      ct.moveTo(r, r);
      ct.lineTo(x1, y1);
      ct.stroke();

      ct.beginPath();
      ct.moveTo(r, r);
      ct.lineTo(x2, y2);
      ct.stroke();
    }, 1000);
  },
  methods: {
    setCookie: function(name, value, days) {
      var d = new Date();
      d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
      window.document.cookie =
        name + "=" + value + ";path=/;expires=" + d.toGMTString();
    },

    getCookie: function(name) {
      var v = window.document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
      return v ? v[2] : null;
    },

    delCookie: function(name) {
      this.setCookie(name, "", -1);
    },
    lifecount() {
      //如果找到用户数据，则显示重置icon和链接（即非他人访问）
      if (this.getCookie("year") && this.getCookie("month")) {
        this.show_resetlink = true;
      }

      var now = new Date();
      var birthyear, birthmonth, birthday, longevity;
      birthyear = this.birthyear;
      birthmonth = this.birthmonth;
      birthday = this.birthday;
      longevity = this.longevity;
      if (birthyear && birthmonth && birthday && longevity) {
        this.birthdate = new Date(birthyear, birthmonth - 1, birthday, 0, 0, 0);
        if (this.die_url.search("year") == -1) {
          this.die_url =
            this.die_url +
            "?year=" +
            birthyear +
            "&month=" +
            birthmonth +
            "&day=" +
            birthday +
            "&longevity=" +
            longevity;
        }
      }
      this.count = ((now - this.birthdate) / (365.245 * 24 * 3600000)).toFixed(8);
      this.theyear = ((now - this.birthdate) / (365.245 * 24 * 3600000)).toFixed(0);
      this.month = ((now - this.birthdate) / (30.5 * 24 * 3600000)).toFixed(0);
      this.week = ((now - this.birthdate) / (7 * 24 * 3600000)).toFixed(0);
      this.day = ((now - this.birthdate) / (24 * 3600000)).toFixed(0);
      this.hour = ((now - this.birthdate) / 3600000).toFixed(0);
      this.minute = ((now - this.birthdate) / 60000).toFixed(0);
      var t = setTimeout(function() {
        lifecount();
      }, 500);
      var description = "我都已经" + this.count.toString() + "岁了！！";
      var meta = document.getElementsByTagName("meta");
      meta["description"].setAttribute("content", description);
    },

    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },

    is_weixin() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //alert('weixin navigator');
        return true;
      } else {
        //alert('not !!!!weixin navigator');
        return false;
      }
    }
  }
};
</script>
<style scoped>
.nomargin {
  margin: 0px;
}

.clock {
  margin: auto;
  padding: auto;
  height: 660px;
  text-align: center;
}

.diary {
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 50px;
  margin-top: 50px;
}

.content {
  color: black;
  margin: 0px;
  font-size: 0.5rem;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
}

.marginb {
  margin-bottom: 25px;
}
.marginz {
  margin: 0;
}

.grey {
  color: grey;
}

.bigfont {
  font-size: 1rem;
}

.button {
  margin: 0px 0px 0px 0px;
  border: 1px solid grey;
  border-radius: 35px;
  background-color: white;
  padding: 15px 15px 15px 15px;
  height: 80px;
  width: 50%;
}

.hint {
  font-size: 0.5rem;
  max-height: 100%;
  text-align: center;
}

.url {
  text-decoration: none;
}

.table {
  border: 0;
  margin: auto;
}

.grid {
  border: 0px solid grey;
  margin: auto;
  width: 33%;
}
</style>